<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            width: 400px;
        }
        .container{
            display: inline-block;
            background-color: #f2f2f2;
            padding: 10px;
            margin: 10px;
        }
        .clip-inset{
            clip-path: inset(20px);
        }
        .clip-inset-round{
            clip-path: inset(0px 20px round 10px);
        }
        .clip-circle{
            clip-path: circle(60% at 20% 50%);
        }
        .clip-ellipse{
            clip-path: ellipse(40% 35% at center);
        }
        .clip-polygon{
            clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
        }
    </style>
</head>
<body>
    <h1>clip-path</h1>
    <div class="container">
        <h2>normal</h2>
        <p>&nbsp;</p>
        <img src="../../../demo.jpg">
    </div>
    <div class="container">
        <h2>inset</h2>
        <p>clip-path: inset(20px)</p>
        <img src="../../../demo.jpg" class="clip-inset">
    </div>
    <div class="container">
        <h2>inset round</h2>
        <p>clip-path: inset(0px 20px round 10px)</p>
        <img src="../../../demo.jpg" class="clip-inset-round">
    </div>
    <div class="container">
        <h2>circle</h2>
        <p>clip-path: circle(60% at 20% 50%);</p>
        <img src="../../../demo.jpg" class="clip-circle">
    </div>
    <div class="container">
        <h2>ellipse</h2>
        <p>clip-path: ellipse(40% 35% at center);</p>
        <img src="../../../demo.jpg" class="clip-ellipse">
    </div>
    <div class="container">
        <h2>polygon</h2>
        <p>clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);</p>
        <img src="../../../demo.jpg" class="clip-polygon">
    </div>

    
</body>
</html>